import * as d3 from "d3";

function GDPpaint(data,Status)
{
  // 数据转换
  data=data.map(d=>{return{
    year:parseInt(d.year),//年份
    typename:d.typename,//不同地区名称或地区增长率
    typenum:parseInt(d.typenum),//不同地区编号
    GDP:parseFloat(d.GDP)}//GDP或者增长率
  });
  // 初始化参数
  const width = 400;
  const height = 300;
  const marginTop = 40;
  const marginRight = 20;
  const marginBottom = 20;
  const marginLeft = 20;
  let typenum_localgdp = 0;// 选择低级数据 如：天津、南开区
  let typenum_localrate = 20;// 选择高级数据 如：全国、天津  
  let typenum_globalrate = 19;// 选择高级数据 如：全国、天津
  // GDP : 0天津 1-16各区 // Rate : 19全国 20天津 21-36各区
  
  // 判断Status来确定展示数据范围
  switch(Status){
    case 0:{//展示天津整体情况
      typenum_localgdp=0;
      typenum_localrate=20;
      typenum_globalrate=19;
      break;
    }
    default:{//展示某一区的情况
      typenum_localgdp=Status;
      typenum_localrate=Status+20;
      typenum_globalrate=20;
      break;
    }
  }
  // 筛选所需数据
  let data_localgdp = data.filter(item =>{
    return item.typenum == typenum_localgdp;
  });
  let data_rate = data.filter(item =>{
    return (item.typenum == typenum_globalrate || item.typenum == typenum_localrate);
  });

  // 设置坐标轴参数
  const Xmax = d3.max(data_localgdp.map(d=>d.year));
  const Xmin = d3.min(data_localgdp.map(d=>d.year));
  const Ymaxrate = d3.max(data_rate.map(d=>d.GDP));
  const Yminrate = d3.min(data_rate.map(d=>d.GDP));
  const Ymaxgdp = d3.max(data_localgdp.map(d=>d.GDP));

  // 创建坐标尺
  const mybandwidth=(width-marginLeft-marginRight)/data_localgdp.length/2;
  const x = d3.scaleLinear()
      .domain([Xmin, Xmax])
      .range([2*marginLeft+mybandwidth, width - marginRight-mybandwidth]);
  
  const yrate = d3.scaleLinear()
      .domain([Yminrate, Ymaxrate])
      .range([(height - marginBottom)/1.2, 2*marginTop]);

  const ygdp = d3.scaleLinear()
      .domain([0, Ymaxgdp])
      .range([height - marginBottom, 1.2*marginTop]);

  const color = d3.scaleOrdinal()
      .domain(data.map(d => d.typenum))// typenum%10后输入[0,9]
      .range(d3.schemeTableau10);//schemeCategory10
  
  // 选择SVG容器
  const svg = d3.select("#svgGDP");
  svg.selectAll("*").remove();
  svg.attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .attr("style", "max-width: 100%; height: auto; font: 20px sans-serif;");
  // 增加坐标轴
  svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x).ticks(5).tickSize(0).tickFormat(num => num.toString()))
    .call(g => g.selectAll(".domain").remove())
    .attr("font-size", "14px");
  svg.append("g")
    .attr("transform", `translate(${marginLeft+mybandwidth},0)`)
    .call(d3.axisLeft(ygdp).ticks(5).tickSizeOuter(0).tickFormat(num => num.toString()+''))
    .call(g => g.selectAll(".domain").remove())
    .attr("font-size", "10px");
  // 左侧坐标轴标签
  svg.append("text")
    .attr("x", 0)
    .attr("y", 20)
    .attr("text-anchor", "start")
    .attr("font-size", "14px")
    .attr("font-family", "Arial, sans-serif")
    //.style("font-weight", "bold")
    .text("↑ 生产总值/亿元");
  

  // 绘制GDP柱形图
  const series_gdp = svg.append("g")
    .selectAll()
    .data(data_localgdp)// 绘制当地GDP增速
    .join("g")
    .append("rect")
    .join("rect")
      .attr("x", d => x(d.year) - mybandwidth / 2)
      // {console.log(d);return ;}  
      .attr("width", mybandwidth)
      .attr("fill", d => color(d.typenum % 10)+"70")//透明度
      // .attr("y", d => ygdp(0))
      // .attr("height",height-marginBottom-ygdp(0))
      // .transition() // 开始动画
      // .duration(1000) // 动画持续时间
      .attr("y", d => ygdp(d.GDP))
      .attr("height", d => height-marginBottom-ygdp(d.GDP))
      .append("title")
      .text(d => `${d.typename}在${d.year}年GDP为${d.GDP}亿元`)
    ;// 增加小标签

  // 绘制GDP增速
  const series_rate = svg.append("g")
    .selectAll()
    // d3.group之后的形式[typenum=20,[array]]
    .data(d3.group(data_rate, d => d.typenum))
    .join("g");
  // Draw the lines.
  series_rate.append("path")
      .attr("fill", "none")
      .attr("stroke", d => color(d[0] % 10))
      .attr("stroke-width", 1.5)// 线的粗细
      // .attr("d", d => d3.line().x(d => x(d.year))
      // .y(d => yrate(0))(d[1])) // 初始位置
      // .transition() // 开始动画
      // .duration(1000) // 动画持续时间
      .attr("d", d => d3.line().x(d => x(d.year))
          .y(d => yrate(d.GDP))(d[1]));
          // 将整个数据数组d[1]传递给这个线生成器，d[0]为数组长度

  // Append the lines labels.
  series_rate.append("g")
      .attr("stroke-linecap", "round")
      .attr("stroke-linejoin", "round")
      .attr("text-anchor", "middle")
    .selectAll()
    .data(d => d[1])
    .join("text")
      .text(d => d.GDP)
      .attr("dy", "0.3em")// 文字偏移量
      .attr("x", d => d.typenum==typenum_globalrate?x(d.year):x(d.year))
      .attr("y", d => d.typenum==typenum_globalrate?yrate(d.GDP)-marginTop/2:yrate(d.GDP)+marginTop/2)
      .attr("font-size", 14) // 设置字体大小12
      .style("fill", d=>color(d.typenum % 10))
    .clone(true).lower()
      .attr("fill", "none")
      .attr("stroke", "white")
      .attr("stroke-width", 6);// 线中文字背景大小

  // 创建一个组元素用于容纳图例
  const legendGroup = svg.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(20, 30)");
  // 创建一个矩形和文本组合表示颜色和标签
  const legendItems = legendGroup.selectAll(".legend-item")
    .data(d3.group(data_rate, d => d.typenum))
    .enter().append("g")
    .attr("class", "legend-item")
    .attr("transform", (d, i) => `translate(${90+i * 140}, 0)`);
  // 添加矩形表示颜色
  legendItems.append("rect")
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", d => color(d[0] % 10));
  // 添加文本表示标签
  legendItems.append("text")
    .attr("x", 15) // 调整文本的位置
    .attr("y", 8)
    .attr("dy", "0.3em")
    .attr("font-size", "14px")
    .attr("font-family", "Arial, sans-serif")
    .attr("text-anchor", "start")
    .text(d => {//console.log(d);
      return `${d[1][0].typename}`;}); //根据数据值生成标签文本
  

  return svg.node();
}

export default GDPpaint;